<template>
  <div class="ai-panel flex flex-col h-full">
    <!-- 面板标题 -->
    <div class="panel-header flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
      <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 flex items-center">
        <Icon icon="material-symbols:psychology" class="w-4 h-4 mr-2" />
        AI 智能助手
      </h3>
      <button 
        @click="$emit('close')"
        class="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded"
      >
        <Icon icon="material-symbols:close" class="w-4 h-4" />
      </button>
    </div>

    <!-- AI 功能选项卡 -->
    <div class="tabs flex border-b border-gray-200 dark:border-gray-700">
      <button 
        v-for="tab in tabs" 
        :key="tab.id"
        @click="activeTab = tab.id"
        class="flex-1 px-3 py-2 text-sm font-medium transition-colors"
        :class="activeTab === tab.id 
          ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400' 
          : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
      >
        <Icon :icon="tab.icon" class="w-4 h-4 mx-auto mb-1" />
        <div class="text-xs">{{ tab.name }}</div>
      </button>
    </div>

    <!-- AI 功能内容 -->
    <div class="flex-1 overflow-auto">
      <!-- 内容优化 -->
      <div v-if="activeTab === 'optimize'" class="p-4">
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              优化类型
            </label>
            <select 
              v-model="optimizeType"
              class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
            >
              <option value="clarity">提升清晰度</option>
              <option value="concise">简化表达</option>
              <option value="professional">专业化</option>
              <option value="engaging">增强吸引力</option>
            </select>
          </div>
          
          <button 
            @click="optimizeContent"
            class="w-full flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
            :disabled="isProcessing"
          >
            <Icon icon="material-symbols:auto-fix-high" class="w-4 h-4 mr-2" />
            {{ isProcessing ? '优化中...' : '优化内容' }}
          </button>
        </div>
      </div>

      <!-- 语法检查 -->
      <div v-if="activeTab === 'grammar'" class="p-4">
        <div class="space-y-4">
          <div class="flex items-center justify-between">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">自动检查</span>
            <button 
              @click="autoGrammarCheck = !autoGrammarCheck"
              class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
              :class="autoGrammarCheck ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700'"
            >
              <span 
                class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
                :class="autoGrammarCheck ? 'translate-x-6' : 'translate-x-1'"
              />
            </button>
          </div>
          
          <button 
            @click="checkGrammar"
            class="w-full flex items-center justify-center px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
            :disabled="isProcessing"
          >
            <Icon icon="material-symbols:spellcheck" class="w-4 h-4 mr-2" />
            {{ isProcessing ? '检查中...' : '检查语法' }}
          </button>
          
          <!-- 语法问题列表 -->
          <div v-if="grammarIssues.length > 0" class="space-y-2">
            <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300">发现的问题</h4>
            <div 
              v-for="issue in grammarIssues" 
              :key="issue.id"
              class="p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-md"
            >
              <div class="flex items-start justify-between">
                <div class="flex-1">
                  <p class="text-sm text-yellow-800 dark:text-yellow-200">{{ issue.message }}</p>
                  <p class="text-xs text-yellow-600 dark:text-yellow-400 mt-1">第 {{ issue.line }} 行</p>
                </div>
                <button 
                  @click="fixIssue(issue)"
                  class="ml-2 px-2 py-1 text-xs bg-yellow-600 text-white rounded hover:bg-yellow-700"
                >
                  修复
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 翻译 -->
      <div v-if="activeTab === 'translate'" class="p-4">
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              目标语言
            </label>
            <select 
              v-model="targetLanguage"
              class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
            >
              <option value="en">英语</option>
              <option value="ja">日语</option>
              <option value="ko">韩语</option>
              <option value="fr">法语</option>
              <option value="de">德语</option>
              <option value="es">西班牙语</option>
            </select>
          </div>
          
          <button 
            @click="translateContent"
            class="w-full flex items-center justify-center px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors"
            :disabled="isProcessing"
          >
            <Icon icon="material-symbols:translate" class="w-4 h-4 mr-2" />
            {{ isProcessing ? '翻译中...' : '翻译内容' }}
          </button>
        </div>
      </div>

      <!-- 摘要生成 -->
      <div v-if="activeTab === 'summary'" class="p-4">
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              摘要长度
            </label>
            <select 
              v-model="summaryLength"
              class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
            >
              <option value="short">简短 (1-2 句)</option>
              <option value="medium">中等 (3-5 句)</option>
              <option value="long">详细 (段落)</option>
            </select>
          </div>
          
          <button 
            @click="generateSummary"
            class="w-full flex items-center justify-center px-4 py-2 bg-orange-600 text-white rounded-md hover:bg-orange-700 transition-colors"
            :disabled="isProcessing"
          >
            <Icon icon="material-symbols:summarize" class="w-4 h-4 mr-2" />
            {{ isProcessing ? '生成中...' : '生成摘要' }}
          </button>
        </div>
      </div>

      <!-- 内容扩展 -->
      <div v-if="activeTab === 'expand'" class="p-4">
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              扩展方向
            </label>
            <select 
              v-model="expandDirection"
              class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
            >
              <option value="detail">添加细节</option>
              <option value="example">添加示例</option>
              <option value="explanation">深入解释</option>
              <option value="context">补充背景</option>
            </select>
          </div>
          
          <button 
            @click="expandContent"
            class="w-full flex items-center justify-center px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors"
            :disabled="isProcessing"
          >
            <Icon icon="material-symbols:expand-content" class="w-4 h-4 mr-2" />
            {{ isProcessing ? '扩展中...' : '扩展内容' }}
          </button>
        </div>
      </div>

      <!-- 创意写作 -->
      <div v-if="activeTab === 'creative'" class="p-4">
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              写作提示
            </label>
            <textarea
              v-model="creativePrompt"
              placeholder="描述您想要的内容类型或主题..."
              class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 resize-none"
              rows="3"
            />
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              写作风格
            </label>
            <select 
              v-model="writingStyle"
              class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
            >
              <option value="formal">正式</option>
              <option value="casual">随意</option>
              <option value="academic">学术</option>
              <option value="creative">创意</option>
              <option value="technical">技术</option>
            </select>
          </div>
          
          <button 
            @click="generateCreativeContent"
            class="w-full flex items-center justify-center px-4 py-2 bg-pink-600 text-white rounded-md hover:bg-pink-700 transition-colors"
            :disabled="isProcessing || !creativePrompt.trim()"
          >
            <Icon icon="material-symbols:auto-awesome" class="w-4 h-4 mr-2" />
            {{ isProcessing ? '创作中...' : '开始创作' }}
          </button>
        </div>
      </div>
    </div>

    <!-- AI 建议结果 -->
    <div v-if="aiResult" class="border-t border-gray-200 dark:border-gray-700 p-4 bg-gray-50 dark:bg-gray-800">
      <div class="flex items-center justify-between mb-2">
        <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300">AI 建议</h4>
        <div class="flex space-x-2">
          <button 
            @click="applyResult"
            class="px-3 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700"
          >
            应用
          </button>
          <button 
            @click="copyResult"
            class="px-3 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700"
          >
            复制
          </button>
          <button 
            @click="aiResult = ''"
            class="px-3 py-1 text-xs bg-gray-600 text-white rounded hover:bg-gray-700"
          >
            关闭
          </button>
        </div>
      </div>
      <div class="text-sm text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-900 p-3 rounded border max-h-40 overflow-auto">
        {{ aiResult }}
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="isProcessing" class="absolute inset-0 bg-white/80 dark:bg-gray-900/80 flex items-center justify-center">
      <div class="flex flex-col items-center">
        <div class="animate-spin w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full mb-3"></div>
        <p class="text-sm text-gray-600 dark:text-gray-400">AI 正在处理中...</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Icon } from '@iconify/vue'

const props = defineProps<{
  content: string
}>()

const emit = defineEmits<{
  close: []
  suggestion: [suggestion: string]
}>()

// 响应式状态
const activeTab = ref('optimize')
const isProcessing = ref(false)
const aiResult = ref('')

// AI 功能选项卡
const tabs = [
  { id: 'optimize', name: '优化', icon: 'material-symbols:auto-fix-high' },
  { id: 'grammar', name: '语法', icon: 'material-symbols:spellcheck' },
  { id: 'translate', name: '翻译', icon: 'material-symbols:translate' },
  { id: 'summary', name: '摘要', icon: 'material-symbols:summarize' },
  { id: 'expand', name: '扩展', icon: 'material-symbols:expand-content' },
  { id: 'creative', name: '创作', icon: 'material-symbols:auto-awesome' }
]

// 各功能的配置
const optimizeType = ref('clarity')
const autoGrammarCheck = ref(false)
const targetLanguage = ref('en')
const summaryLength = ref('medium')
const expandDirection = ref('detail')
const creativePrompt = ref('')
const writingStyle = ref('formal')

// 语法问题
const grammarIssues = ref([
  { id: 1, line: 5, message: '建议使用更正式的表达方式' },
  { id: 2, line: 12, message: '句子过长，建议分割' }
])

// AI 功能方法
const optimizeContent = async () => {
  isProcessing.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 2000))
    aiResult.value = `根据${optimizeType.value}优化建议：\n\n您的内容已经过优化，表达更加清晰简洁。建议在第3段添加更多具体示例来支持您的观点。`
  } finally {
    isProcessing.value = false
  }
}

const checkGrammar = async () => {
  isProcessing.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 1500))
    aiResult.value = '语法检查完成：发现2个可优化的地方，已在下方列出。整体语法结构良好。'
  } finally {
    isProcessing.value = false
  }
}

const translateContent = async () => {
  isProcessing.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 2500))
    aiResult.value = `翻译为${targetLanguage.value}：\n\nThis is a sample translation of your content. The translation maintains the original meaning while adapting to the target language's conventions.`
  } finally {
    isProcessing.value = false
  }
}

const generateSummary = async () => {
  isProcessing.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 2000))
    const summaries = {
      short: '这是一个关于Markdown编辑器功能的简要介绍。',
      medium: '本文档详细介绍了一个功能强大的Markdown编辑器，包括实时预览、AI助手和Git集成等核心功能。编辑器采用现代化设计，提供优秀的用户体验。',
      long: '本文档全面介绍了一个基于现代技术栈开发的跨平台Markdown编辑器。该编辑器不仅提供了传统的文档编辑功能，还集成了AI智能助手、Git版本控制、实时预览等高级特性。通过优雅的界面设计和流畅的交互体验，为用户提供了专业级的文档创作环境。'
    }
    aiResult.value = summaries[summaryLength.value as keyof typeof summaries]
  } finally {
    isProcessing.value = false
  }
}

const expandContent = async () => {
  isProcessing.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 2000))
    const expansions = {
      detail: '建议在现有内容基础上添加更多技术细节和实现原理的说明。',
      example: '可以添加具体的使用示例和代码片段来帮助读者更好地理解。',
      explanation: '建议深入解释核心概念的工作原理和设计思路。',
      context: '可以补充相关的背景信息和行业发展趋势。'
    }
    aiResult.value = expansions[expandDirection.value as keyof typeof expansions]
  } finally {
    isProcessing.value = false
  }
}

const generateCreativeContent = async () => {
  isProcessing.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 3000))
    aiResult.value = `基于您的提示"${creativePrompt.value}"，以${writingStyle.value}风格创作的内容：\n\n这是一个根据您的要求生成的创意内容示例。内容风格符合您选择的${writingStyle.value}风格，并围绕您提供的主题展开。`
  } finally {
    isProcessing.value = false
  }
}

const fixIssue = (issue: any) => {
  console.log('修复语法问题:', issue.id)
  grammarIssues.value = grammarIssues.value.filter(i => i.id !== issue.id)
}

const applyResult = () => {
  emit('suggestion', aiResult.value)
  aiResult.value = ''
}

const copyResult = () => {
  navigator.clipboard.writeText(aiResult.value)
  console.log('AI建议已复制到剪贴板')
}
</script>